import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import api from '../api'

function Home () {
    // 在React中，使用useEffect钩子来处理副作用，例如发送请求、订阅事件等。
    // 但是，并不是所有的副作用都需要在useEffect中处理。
    // 在某些情况下，如果副作用是与组件渲染无关的，且只需要执行一次，可以在组件挂载时直接执行副作用代码。
    // 例如，可以在组件的构造函数中执行副作用代码：
    // 在useEffect中使用async/await时，可能会导致返回的清理函数失效，从而出现destroy is not a function的报错。
    // 这是因为async/await会返回一个Promise对象，而useEffect需要返回一个函数或undefined。
    const [isLogin, setIsLogin] = useState(false);
    let [tags, setTags] = useState([])
    const [articleList, setArticleList] = useState([]);
    // useEffect触发两次
    // 在react-router-dom中，可以使用useNavigate钩子或history.push方法来进行页面跳转，而不需要在每个组件中执行一次Navigate函数。
    const navigate = useNavigate()
    useEffect(() => {
        const getTags = async () => {
            try {
              const res = await api.axios.get(api.url.getTags);
              if(res.status === 200) {
                let {tags} = res.data.data
                setTags(tags)
              }
              console.log('getTags1', res);
            } catch (error) {
              console.log(error);
            }
        };
        
        getTags();
        const getArticles = async () => {
            try {
              const res = await api.axios.get(api.url.getArticles);
              if(res.status === 200) {
                let data = res.data.data
                setArticleList(data)
                console.log('getArticles2', data);
              }
            } catch (error) {
              console.log(error);
            }
        };
        
        getArticles();

        
    }, [isLogin])
    
    const favoriteArticle = (slug) => {
        console.log('slug', slug)
        if(!isLogin) return navigate('/login')
    }
    return (
        <div className="home-page">
            <div className="banner">
                <div className="container">
                    <h1 className="logo-font">conduit</h1>
                    <p>A place to share your knowledge.</p>
                </div>
            </div>
            <div className="container page">
                <div className="row">
                    <div className="col-md-9">
                        <div className="feed-toggle">
                            <ul className="nav nav-pills outline-active">
                                {
                                    isLogin && <li className="nav-item">
                                    <a className="nav-link disabled" href="/">Your Feed</a>
                                </li>
                                }
                                <li className="nav-item">
                                    <a className="nav-link active" href="/">Global Feed</a>
                                </li>
                            </ul>
                        </div>
                        {
                            articleList.map(article => <div className="article-preview">
                            <div className="article-meta">
                                <a href="/profile"><img  src={article.image? article.image :'http://localhost:3000/avator.webp'}  alt="" /></a>
                                <div className="info">
                                    <a href="/profile" className="author">{article.author}</a>
                                    <span className="date">{article.updatedAt}</span>
                                </div>
                                <button onClick={favoriteArticle.bind(null, article.slug)} className="btn btn-outline-primary btn-sm pull-xs-right">
                                    <i className="ion-heart" /> {article.favoritesCount}
                                </button>
                            </div>
                            <a href="/article/:slug" className="preview-link">
                                <h1>{article.title}</h1>
                                <p>{article.description}</p>
                                <span>Read more...</span>
                            </a>
                        </div>)
                        }
                        
                        {/* <div className="article-preview">
                            <div className="article-meta">
                                <a href="/profile"><img src="http://localhost:3000/avator.webp"  alt="头像" /></a>
                                <div className="info">
                                    <a href="/profile" className="author">Albert Pai</a>
                                    <span className="date">January 20th</span>
                                </div>
                                <button className="btn btn-outline-primary btn-sm pull-xs-right">
                                    <i className="ion-heart" /> 32
                                </button>
                            </div>
                            <a href="/profile" className="preview-link">
                                <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
                                <p>This is the description for the post.</p>
                                <span>Read more...</span>
                            </a>
                        </div> */}
                    </div>
                    <div className="col-md-3">
                        <div className="sidebar">
                            <p>Popular Tags</p>
                            <div className="tag-list">
                            {
                                tags.map((item,index) => <a href="/tag" key={index} className="tag-pill tag-default">{item}</a>)
                            }
                                {/* <a href="/tag" className="tag-pill tag-default">programming</a> */}
                                {/* <a href className="tag-pill tag-default">javascript</a>
                                <a href className="tag-pill tag-default">emberjs</a>
                                <a href className="tag-pill tag-default">angularjs</a>
                                <a href className="tag-pill tag-default">react</a>
                                <a href className="tag-pill tag-default">mean</a>
                                <a href className="tag-pill tag-default">node</a>
                                <a href className="tag-pill tag-default">rails</a> */}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Home;